<template>
<pay-header title="支付页面"/>
  <div class="goods">
    <div class="image">
      <img :src="goodDetails?.image" alt="">
    </div>
    <div class="text">
      <h3>{{goodDetails?.title}}</h3>
      <div>
        <span class="price">￥{{goodDetails?.price}}</span>
        <span class="num">x1</span>
      </div>
    </div>
  </div>
  <item-view :item="item1" :right="true"/>
  <item-view :item="item2" :image="true"/>
  <item-view :item="item3"/>
  <item-view :item="item4"/>
  <van-submit-bar disabled :price="price" button-text="提交订单" tip-icon="info-o" @submit="onSubmit"/>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import PayHeader from '@/components/PubHeaderComponent.vue'
import {getGoodsDetails} from '@/api/Goods/Goods.ts'
import {computed, nextTick, onMounted, reactive, ref} from "vue";
import ItemView from "@/views/PayView/components/ItemView.vue";
import alipay from '@/assets/images/alipay.png'
import {getPayOrder} from '@/api/Oder/Oder.ts'
const route=useRoute()
interface IGoods{
  id:number,
  image:string,
  price:string,
  title:string,
}
const goodDetails=ref<IGoods>()
onMounted(async ()=>{
  const res=await getGoodsDetails({id:route.params.id})
  if(res.status==200){
    goodDetails.value=res.data
    item1.desc=res.data.price
  }
})
const item1=reactive(
    {
      text:'支付金额',
      desc:''
    }
)
const item2={
  text:'支付方式',
  image:alipay
}
const item3={
  text:'使用优惠券',
  desc: ''
}
const item4={
  text:'使用积分折现',
  desc: ''
}
const price=computed<number>(()=>{
  return parseInt(item1.desc)*100
})
const onSubmit=()=>{
  getPayOrder({
    orderNo:route.params.orderNo,
  }).then(res=>{
    if (res.code==200){
      const div=document.createElement("formdiv")
      div.innerHTML=res.data
      document.body.appendChild(div)
      nextTick(()=>{
        document.forms['0'].submit()
      })
    }
  })
}
</script>

<style scoped lang="less">
.goods{
  background-color: #fff;
  margin: 10px 0;
  border: 5px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .image{
    margin-right: 10px;
    img{
      width: 100px;
      border-radius: 10px;
    }
  }
  .text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    h3{
      font-size: 15px ;
    }
    div{
      display: flex;
      .price{
        flex: 1;
        display: block;
        color: #f23d52;
      }
      .num{
        flex:1;
        font-size: 12px;
        text-align: right;
        padding-top: 3px;
      }
    }
  }
}
</style>